<%--
  Created by IntelliJ IDEA.
  User: xiaomi;
  Date: 2025/1/31;
  Time: 14:47;
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP Navigation Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link href="https://example.com/foundertype/fzshuti.css" rel="stylesheet">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
            text-decoration: none;
            /* 引入字体 */
            font-family: 'Montserrat';
        }
        body{
            background: rgb(238, 244, 255);
            font-size: 14px;
            /* 字间距 */
            letter-spacing: 1px;
        }

        .wrapper{
            /* 弹性布局 */
            display: flex;
            width: 100%;
        }

        .sidebar{
            /* 相对定位 */
            position: relative;
        }

        .sidebar .bg_shadow{
            width: 100%;
            height: 100%;
            /* 定位 */
            position: fixed;
            top: 0;
            left: 0;
            background: #ffff;
            z-index: 998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .sidebar_inner{
            width: 250px;
            position: fixed;
            top: 0;
            left: 0;
            /* 百分之百的窗口高度 */
            height: 100vh;
            background: rgb(165, 184, 213);
            z-index: 999;
            transition: all 0.3s ease;
        }

        .main_container{
            margin-left: 250px;
            width: calc(100% - 250px);
            transition: all 0.3s ease;
        }

        .sidebar_inner .profile_info{
            padding: 20px;
            text-align: center;
            margin-bottom: 40px;
        }

        .sidebar_inner .profile_info .profile_img{
            width: 100px;
            margin: 0 auto 5px;
        }

        .sidebar_inner .profile_info .profile_img img{
            width: 100%;
            border-radius: 50%;
            display: block;
        }

        .sidebar_inner .profile_info .profile_data .name{
            font-size: 23px;
            color: #fff;
            margin-bottom: 5px;
            font-family: "方正舒体", sans-serif;
        }

        .sidebar_inner .profile_info .profile_data span{
            color: rgb(138, 165, 201);
        }
        /* 侧边导航栏开始 */

        .sidebar_inner .siderbar_menu{
            height: 490px;
            overflow: auto;
        }

        .sidebar_inner .siderbar_menu> li > a{
            padding: 12px 20px;
            display: flex;
            align-items: center;
            /* 相对定位 */
            position: relative;
            margin-bottom: 1px;
            background: rgb(165, 183, 210)
        }

        .sidebar_inner .siderbar_menu> li > a .icon{
            font-size: 25px;
            margin-right: 15px;
        }
        .sidebar_inner .siderbar_menu> li.active > a,
        .sidebar_inner .siderbar_menu> li > a:hover{
            background: rgb(106, 166, 210);
        }


        .sidebar_inner .siderbar_menu> li > a .arrow{
            position: absolute;
            top: 20px;
            right: 20px;
            transition: all 0.3s ease;
        }


        .sidebar .logout_btn a{
            position: absolute;
            bottom: 20px;
            left: 20px;
            width: 210px;
            border: 2px solid #fff;
            color: #fff;
            border-radius: 3px;
            font-weight: 600;
            padding: 10px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .sidebar .logout_btn a:hover{
            background: #fff;
            color: #fff;
        }
        .navbar{
            background: #fff;
            height: 50px;
            width: 100%;
            box-shadow:  0 3px 5px rgba(0, 0, 0, 0.125);
            display: flex;
            align-items: center;
            padding: 0 20px;
        }

        .navbar .logo a{
            font-family: "方正舒体", sans-serif;
            color: rgb(102, 139, 201);
            font-weight: lighter;
            text-decoration: none;
            font-size: 24px;
        }
        .content{
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
        }

        .accordion{
            background: rgb(151, 183, 224);
            padding-left: 50px;
            height: 0px;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .accordion li a{
            display: block;
            color: #ffffff;
            padding: 12px 0;
            padding-left: 10px;
        }
        .accordion li:last-child a{
            border-bottom: 0px;
        }
        .siderbar_menu::-webkit-scrollbar {
            width: 0 !important
        }
        .accordion{
            overflow-y:auto;
            /*width: 0 !important*/
        }
        ul::-webkit-scrollbar{
            width: 0 !important
        }
        .accordion li a:hover,
        .accordion li a.active{
            color: rgb(80, 156, 255);
        }

        .siderbar_menu > li.active .accordion{
            height: 215px;
        }

        .siderbar_menu > li.active .arrow{
            transform: rotate(180deg);
            transition: all 0.3s ease;
        }

        @media (max-width:1024px){
            .sidebar_inner{
                left: -115%;
                transition: all 0.5s ease;
            }
            .main_container{
                width: 100%;
                margin-left: 0;
            }

            .wrapper.active .sidebar_inner{
                left: 0;
                transition: all 0.5s ease;
            }
            .wrapper.active .sidebar .bg_shadow{
                visibility: visible;
                opacity: 0.7;
            }
        }

    </style>

</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
        $(".siderbar_menu li").click(function(){
            $(".siderbar_menu li").removeClass("active");
            $(this).addClass("active");
        })
        $(".accordion li a").click(function(){
            $(".accordion li a").removeClass("active");
            $(this).addClass("active");
        })
        $(".hamburger").click(function(){
            $(".wrapper").addClass("active");
        })
        $(".bg_shadow,.close").click(function(){
            $(".wrapper").removeClass("active");
        })
    })
    document.addEventListener('DOMContentLoaded', () => {
        var userType = String(sessionStorage.getItem('usertype')).trim();
        var user1 = sessionStorage.getItem('name');
        console.log(user1);
        $("#name").text(user1);
        var user = JSON.stringify("管理员");
        var adminTab = document.querySelectorAll('.hidden');
        var hiddTab = document.querySelectorAll('.admin');

        if (userType === user) {
            // 如果是管理员，显示管理页面导航栏
            adminTab.forEach(function (element) {
                element.style.display = 'none';
            });
        } else {
            // 如果不是管理员，隐藏管理页面导航栏
            hiddTab.forEach(function (element) {
                element.style.display = 'none';
            });
        };
        // 获取所有导航栏链接
        const navLinks = document.querySelectorAll('ul.siderbar_menu a');
        // 给主页链接单独添加点击事件
        const homeLink = document.getElementById('homeLink');
        homeLink.addEventListener('click', function (e) {
            e.preventDefault();
            document.getElementById('contentFrame').src = './app.jsp';
        });
        navLinks.forEach(function (link) {
            if (link!== homeLink) {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    // 根据不同的链接设置不同的src
                    if (link.textContent === '已通过') {
                        sessionStorage.setItem('state',JSON.stringify(1));
                        document.getElementById('contentFrame').src ='listtype.jsp';
                    } else if (link.textContent === '待审核') {
                        sessionStorage.setItem('state',JSON.stringify(0));
                        document.getElementById('contentFrame').src ='listtype.jsp';
                    } else if (link.textContent === '未通过') {
                        sessionStorage.setItem('state',JSON.stringify(2));
                        document.getElementById('contentFrame').src ='listtype.jsp';
                    } else if (link.textContent === '用户管理') {
                        document.getElementById('contentFrame').src ='usercontroll.jsp';
                    } else if (link.textContent === '私教管理') {
                        document.getElementById('contentFrame').src ='teachercon.jsp';
                    } else if (link.textContent === '套餐管理') {
                        document.getElementById('contentFrame').src ='goodlist.jsp';
                    } else if (link.textContent === '课程销量统计') {
                        document.getElementById('contentFrame').src ='statistics.jsp';
                    } else if (link.textContent === '会员套餐销量统计') {
                        document.getElementById('contentFrame').src ='usergood.jsp';
                    } else if (link.textContent === '添加课程') {
                        document.getElementById('contentFrame').src = 'addCourse.jsp';
                    } else if (link.textContent === '审核状态') {
                        document.getElementById('contentFrame').src ='reviewStatus.jsp';
                    } else if (link.textContent === '往期课程记录') {
                        document.getElementById('contentFrame').src = 'courseRecord.jsp';
                    } else if (link.textContent === '课程任务') {
                        document.getElementById('contentFrame').src = 'owncourse.jsp';
                    }else if (link.textContent === '每月销售金额统计') {
                        document.getElementById('contentFrame').src = 'monthprice.jsp';
                    }
                });
            }
        });
    });
</script>
<div class="wrapper">
    <div class="sidebar">
        <div class="bg_shadow"></div>
        <div class="sidebar_inner">
            <div class="profile_info">
                <div class="profile_img">
                    <img src="https://img2.douhuiai.com/dhimg/20231107/6549fc109256d.jpg" alt="">
                </div>
                <div class="profile_data">
                    <p class="name" id ="name"></p>
                </div>
            </div>

            <ul class="siderbar_menu">
                <li class="active" id="homeLink">
                    <a href="#">
                        <div class="icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="active" style="color: #ffffff">主页</div>
                    </a>
                </li>
                <li class="admin">
                    <a href="#">
                        <div class="icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="title" style="color: #ffffff">课程审核</div>
                        <div class="arrow">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </a>
                    <ul class="accordion">
                        <li><a href="#" class="active" >已通过</a></li>
                        <li><a href="#" >待审核</a></li>
                        <li><a href="#" >未通过</a></li>
                    </ul>
                </li>
                <li class="admin">
                    <a href="#">
                        <div class="icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="title" style="color: #ffffff">人员管理</div>
                        <div class="arrow">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </a>
                    <ul class="accordion">
                        <li><a href="#" class="active" >用户管理</a></li>
                        <li><a href="#" >私教管理</a></li>
                        <li><a href="#" >套餐管理</a></li>
                    </ul>
                </li>
                <li class="admin">
                    <a href="#">
                        <div class="icon">
                            <i class="fas fa-receipt"></i>
                        </div>
                        <div class="title" style="color: #ffffff">数据统计</div>
                        <div class="arrow">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </a>
                    <ul class="accordion">
                        <li><a href="#" class="active">课程销量统计</a></li>
                        <li><a href="#" class="active">会员套餐销量统计</a></li>
                        <li><a href="#" class="active">每月销售金额统计</a></li>
                    </ul>
                    </a>
                </li>
                <li class="hidden">
                    <a href="#">
                        <div class="icon">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <div class="title" style="color: #ffffff">课程管理</div>
                        <div class="arrow">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </a>
                    <ul class="accordion">
                        <li><a href="#" class="active">添加课程</a></li>
                        <li><a href="#" >审核状态</a></li>
                        <li><a href="#" >往期课程记录</a></li>
                        <li><a href="#" >课程任务</a></li>
                    </ul>
                </li>
            </ul>
            <div class="logout_btn">
                <a href="./index.jsp" >退出登陆</a>
            </div>
        </div>
    </div>
    <div class="main_container">
        <div class="navbar">
            <div class="logo">
                <a href="">健身房管理系统</a>
            </div>
        </div>
        <div class="content">
            <div id="tab1">
                <iframe id="contentFrame" src="./app.jsp" style="height: 100vh;width: 1400px;color: #e7f1ff;"></iframe>
            </div>
        </div>
    </div>
</div>
</body>

</html>